<template>
  <div class="home">
    <div id="myChart" ref="myChart" :style="{width:'600px',height:'500px'}"></div>
    <!-- <HelloWorld msg="Welcome to Your Vue.js App"/> -->
  </div>
</template>

<script>
// @ is an alias to /src
// import HelloWorld from '@/components/HelloWorld.vue'
import 'echarts/map/js/china.js' // 引入中国地图数据
import jsonp from 'jsonp'
// 指定图表的配置项和数据
const option = {
    // backgroundColor: "#02AFDB",
    title: {
      text: '地区疫情视图',
      subtext:'丁香疫情',
      sublink:'https://ncov.dxy.cn/ncovh5/view/pneumonia?from=singlemessage&isappinstalled=0'
    },
    series: [
      {
        name:"确诊人数",//标题
        type: 'map',
        map: 'china',
        roam: true, //缩放
        label: {
          show: true, // 是否显示对应地名
          color: '#333',
          fontSize:10
        },
        itemStyle: {
          areaColor:'#eee',
        },
        emphasis:{
          // 控制鼠标滑过之后的背景色和字体颜色
          label:{
            color:'#fff',
            fontSize:12
          },
          itemStyle:{
            areaColor:'#83b5e7'
          }
        },
        data:[]
      },
  
    ],
    tooltip: {
      trigger: 'item',
      // formatter: '{b}<br/>确诊{c}人'
    },
    toolbox: { //右边工具类
      show: true,
      orient: 'vertical',
      left: 'right',
      top: 'center',
      feature: { //保存图片
      //   dataView: {readOnly: false},
      //   restore: {},
        // saveAsImage: {}
      }
    },
    visualMap: [{
      type:'piecewise',
      show:true,
      splitNumber:4,
      pieces:[
        // 分段
        {min:10000},
        {min:1000,max:9999},
        {min:100,max:999},
        {min:10,max:99},
        {min:1,max:9},
        {min:0,max:0}
      ],
      inRange:{
        symbol:'rect',
        color:['#ffc0b1','#9c0505']
      },
      itemWidth:20,
      itemHeight:10
    }],
    
};
export default {
  name: 'Home',
  mounted(){
    this.init()
    this.initdata()
  },
  data(){
    return{
      // chinaData:[],
      myChart:'',
    }
  },
 
  methods:{
    init(){
      // const url ='/api/news/wap/fymap2020_data.d.json'
      const urls = 'https://interface.sina.cn/news/wap/fymap2020_data.d.json?_=1580892522427'
      jsonp(urls,{},(err,data)=>{
        if(!err){
          console.log(data.data.list)
          let list = data.data.list.map(item=>({name:item.name,value:item.value}))
          option.series[0].data = list;
          this.myChart.setOption(option);
        }
      })
      // this.$http.get(url).then(res=>{
      //   if(res.data){
      //     res.data.data.listByArea.forEach(item => {
      //       this.chinaData.push({
      //         'name':item.provinceShortName,
      //         'value':item.cured
      //       })
      //     });
      //     option.series[0].data = this.chinaData;
      //     this.mychart.setOption(option);
      //   }
      // }).catch(err=>{
      //   console.log(err)
      // })
    },
    initdata(){
      this.myChart = this.$echarts.init(this.$refs.myChart);
      window.onresize = this.myChart.resize;
      

        // 使用刚指定的配置项和数据显示图表。
        this.myChart.setOption(option);
      
    }
  }
}
</script>
